<!-- 
  `name` 属性用于定义组件的名称
  借助 `vite-plugin-vue-setup-extend` 插件，可以直接在 `setup` 标签里设置
  否则，需要使用单独的代码块
  `yarn add -D vite-plugin-vue-setup-extend`
-->
<!-- <script lang="ts"> -->
<!--   export default { -->
<!--   name:'Person', -->
<!--   } -->
<!-- </script> -->
<script setup lang="ts" name="Person">
import { ref } from "vue";

const name = ref("张三");
const age = ref(18);
const tel = ref("13800138000");

const changeName = () => {
  name.value = name.value == "张三" ? "李四" : "张三";
};

const changeAge = () => {
  age.value++;
};

const showTel = () => {
  window.alert(tel.value);
};
</script>

<template>
  <h2>姓名：{{ name }}</h2>
  <h2 class="my-3">年龄：{{ age }}</h2>
  <div class="flex justify-start items-center gap-x-2">
    <button @click="changeName" class="bg-gray-300 px-2 py-1 rounded">
      修改名字
    </button>
    <button @click="changeAge" class="bg-gray-300 px-2 py-1 rounded">
      修改年龄
    </button>
    <button @click="showTel" class="bg-gray-300 px-2 py-1 rounded">
      查看联系方式
    </button>
  </div>
</template>

<style scoped></style>
